<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="add-bottons right" @click="addData()">
				新增
			</view>
		</view>
		
		<view class="menu-content left clearfix">
			<view class="menu-table left clearfix">
				<!--头部-->
				<view class="menu-tr left clearfix" style="font-weight:bold;color:#909399">
					<view class="menu-sort left">
						序号
					</view>
					<view class="menu-title left" style="width:300px;">
						封面
					</view>
					
					<view class="menu-title left" style="padding-left:10px;">
						标题
					</view>
					
					<view class="menu-title left" style="width:100px;">
						是否显示
					</view>
					<view class="menu-title left" style="width:220px;border-right:none;">
						操作
					</view>
				</view>
				
				
				
				
				<view  v-for="(item,index) in menu">
				<view class="menu-tr left clearfix" style="color:#606266;">
					<view class="menu-sort left">
						{{index + 1}}
					</view>
					<view class="menu-title left" style="width:300px;">
						<image :src="item.image" mode="aspectFill" style="width:150px;height:56px;margin-top:2px;"></image>
					</view>
					<view class="menu-title left ellipsis" style="text-align: left;padding-left:10px;">
					
							 {{item.title}}|{{item.en_title}}
						
						
					</view>
					
					
					<view class="menu-title left" style="width:100px;text-align: center;">
						<label v-if="item.is_show==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="item.is_show==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					<view class="menu-title left" style="width:220px;border-right:none;padding-left:5px;">
						
						<view class="buttons left" @click="alertPlay(item,index)" style="margin-top:15px;">
							播放
						</view>
						
						<view class="buttons left" @click="addData(item,index)" style="margin-top:15px;">
							修改
						</view>
						
						<view class="buttons-del left" @click="remove(item,index)" style="margin-top:15px;">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				
				
				</view>
				
				
				
				
				
				
				
			</view>
		</view>
		
		
		<!--新增菜单弹窗-->
		<uni-popup ref="addPopup" type="center">
			<view class="add-box left clearfix">
				<view class="add-title left clearfix">
					<label>新增视频</label>
					<label @click="closeAdd()"><uni-icons type="closeempty" size="16" color="#666"></uni-icons></label>
				</view>
				
				<view class="add-content left clearfix">
					<uni-forms ref="form" :modelValue="formData" label-width="50">
						<uni-forms-item label="中文标题" name="title">
							<uni-easyinput v-model="formData.title" placeholder="请输入中文视频标题" />
						</uni-forms-item>
						
						<uni-forms-item label="英文标题" name="en_title">
							<uni-easyinput v-model="formData.en_title" placeholder="请输入英文视频标题" />
						</uni-forms-item>
						
						
						<uni-forms-item label="显示" required name="is_show">
							<switch @change="setIsshow" :checked="formData.is_show" style="margin-top:5px;" />
						</uni-forms-item>
						
						<uni-forms-item label="视频" required name="url">
							<view class="fengmian-box left clearfix" @click="uploadFile()" v-if="!formData.url">
								+点击添加视频
							</view>
							<view class="fengmian-box left clearfix" @click="uploadFile()" v-if="formData.url">
								已上传
							</view>
						</uni-forms-item>
						<uni-forms-item label="封面" required name="image">
							<view class="fengmian-box left clearfix" @click="uploadFile('image')" v-if="!formData.image">
								+点击添加视频封面
							</view>
							<view class="fengmian-box left clearfix" @click="uploadFile('image')" v-if="formData.image">
								<image :src="formData.image" mode="aspectFill" style="width:100%;height:100%;"></image>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="" style="margin-top:50px;text-align: center;">
							
							<view class="form-quxiao-submit right" @click="closeAdd()">
								取消
							</view>
							
							<view class="form-submit right" @click="submitForm">
								确定
							</view>
							
						</uni-forms-item>
						
					</uni-forms>
				</view>
			</view>
		</uni-popup>
		
		<!--播放视频-->
		<uni-popup ref="videoPopup" type="center">
			<view class="video-alert-box left clearfix">
				<view class="video-title left clearfix" @click="this.$refs.videoPopup.close()">
					<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
				</view>
				<view class="video-play left clearfix">
					<video :src="currentPlayUrl" style="width:400px;height:400px;" autoplay></video>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	.video-play{width:400px;margin-left:50px;min-height:400px;margin-top:50px;border-radius: 5px;}
	.video-title{width:30px;height:30px;float:right;margin-top:10px;margin-right:5px;cursor:pointer;}
	.video-alert-box{width:500px;height:500px;background:#fff;border-radius: 10px;}
	.fengmian-box{width:100%;height:100px;border:1px solid #eee;border-radius: 5px;background:#f8f8f8;line-height:100px;text-align:center;font-size:15px;color:#ccc;cursor:pointer;}
	.uni-forms-item__label{width:60px !important;}
	.form-quxiao-submit{width:80px;line-height:35px;height:35px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;font-size:14px;}
	.form-submit{width:80px;line-height:35px;height:35px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;font-size:14px;}
	.add-content{width:80%;margin-left:10%;margin-top:40px;}
	.add-title label:last-child{float:right;line-height:40px;height:40px;margin-right:20px;font-size:14px;color:#333;}
	.add-title label:first-child{float:left;line-height:40px;height:40px;margin-left:20px;font-size:14px;color:#333;font-weight:500;}
	.add-title{width:100%;line-height:40px;height:40px;border-bottom:1px solid #eee;}
	.add-box{width:700px;height:650px;background:#fff;border-radius: 12px;}
	.menu-title label{float:left;margin-right:5px;}
	.menu-title{width:calc(100% - 750px);height:60px;border-right:1px solid #eee;line-height:60px;text-align:center;font-size:15px;}
	.menu-sort{width:100px;height:60px;line-height:60px;text-align:center;font-size:14px;border-right:1px solid #eee;}
	.menu-tr:hover{background:#f8f8f8;}
	.menu-tr{width:100%;height:60px;border-bottom:1px solid #eee;}
	.menu-table{width:100%;border:1px solid #eee;border-bottom:none;}
</style>

<script>
	var db = uniCloud.database();
	import common from '@/static/js/common.js';
	var global = uniCloud.importObject('global',{customUI:true});
	export default {
		name:"index-banner",
		data() {
			return {
				formData:{
					title:'',
					en_title:'',
					url:'',
					is_show:true,
					url:'',
					image:'',//封面
					currentPlayUrl:'',//播放地址
				},
				menu:[],
				routes: [
				        {
				          to: "/A",
				          name: "官网管理",
				        },
				        {
				          to: "/B",
				          name: "视频管理",
				        }
				      ],
					  rules: {
					  	
					  }
			};
		},
		mounted() {
			var that = this;
			this.getData();
		},
		methods:{
			//播放视频
			alertPlay(item,index){
				this.currentPlayUrl = item.url;
				this.$refs.videoPopup.open();
			},
			//上传图片
			async uploadFile(item = null){
				var that = this;
				uni.chooseFile({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						var tempFilePaths = res.tempFilePaths[0];
						var tempFiles = res.tempFiles[0];
						that.upload(tempFilePaths,tempFiles,item);
					}
				});
			},
			//上传
			async upload(tempFilePaths,tempFiles,item){
				var that = this;
				var fileName = common.generateUUIDWithExtension(tempFiles.name);
				uniCloud.uploadFile({
				        filePath: tempFilePaths,
				        cloudPath: fileName,
				        onUploadProgress: function(progressEvent) {
				          console.log(progressEvent);
				          var percentCompleted = Math.round(
				            (progressEvent.loaded * 100) / progressEvent.total
				          );
						  
						  uni.showLoading({
						  	title:'已传'+percentCompleted+'%'
						  })
				        },
				        success(e) {
							uni.hideLoading();
							if(item == null){
								that.formData.url = e.fileID;
							}else{
								that.formData.image = e.fileID;
							}
							
							console.log('fileID',e.fileID);
						},
						fail(err) {
							uni.hideLoading();
						}
				      });
			},
		
			//设置显示开关
			setIsshow(event){
				this.formData.is_show = event.detail.value;
			},
			//新增菜单
			addData(item=false,index=false){
				if(item && item._id){
					db.collection('video').where({_id:item._id}).get({getOne:true}).then(res=>{
						this.formData = res.result.data;
					});
				}else{
					
					this.formData = {
						title:'',
						en_title:'',
						url:'',
						image:'',
						is_show:true
					}
				}
				this.$refs.addPopup.open();
			},
			//提交订单
			submitForm(form){
				this.$refs.form.setRules(this.rules)
				this.$refs.form.validate().then(res=>{
					
					var formData = this.formData;
					if(!formData.url){
						uni.showToast({
							title:'视频必传',
							icon:'none'
						})
						return false;
					}
					res.image = formData.image;
					if(!formData._id){
						db.collection('video').add(res).then(result=>{
							this.closeAdd();
							res._id = result.result.id;
							this.menu.push(res);
						});
					}else{
						var id = formData._id;
						
							db.collection('video').where({_id:id}).update(res).then(result=>{
								this.closeAdd();
								var index = this.menu.findIndex(item=>item._id == id);
								res._id = id;
								this.menu[index] = res;
							});
						
					}
				})
			},
			//关闭菜单
			closeAdd(){
				this.$refs.addPopup.close();
			},
			
			remove(item,index){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							//删除远程图片
							global.removeFileByPath(item.image);
							if(item && item._id){
								db.collection('video').where({_id:item._id}).remove().then(result=>{
									that.menu.splice(index,1);
								});
							}
							
						}
					}
				});
			},
			//获取菜单列表
			getData(){
				uni.showLoading({
					title:'加载中'
				})
				db.collection('video').orderBy('create_date desc').get().then(res=>{
					uni.hideLoading();
					this.menu = res.result.data;
				}).catch(err=>{
					uni.hideLoading();
				});
			}
		}
	}
</script>
